/* 该文件是针对博客编辑页写的样式 */

/* 版心 */
.blog-edit-container {
    width: 1000px;
    height: calc(100% - 50px);
    /* 元素（标签）的水平居中 */
    margin: 0 auto;
}

/* 设置标题编辑区的样式 */
.blog-edit-container .title {
    /* 宽度和父亲一样宽 */
    height: 50px;
    /* 水平排列多个元素：弹性布局！ */
    display: flex;
    /* 水平方向中间是有空隙的 */
    justify-content: space-between;
    align-items: center;
}

/* 针对标题输入框进行调整 */
#blog-title {
    height: 40px;
    width: 897px;
    font-size: 20px;
    padding-left: 5px;
    /* 去掉轮廓线，轮廓线就是选中输入框时周围的黑圈 */
    outline: none;
    /* 去掉边框线 */
    border: none;
    border-radius: 5px;
    /* 加上背景半透明效果 */
    background-color: rgba(255,255,255,0.8);
}

/* 提交按钮设置 */
#submit {
    height: 40px;
    width: 100px;
    /* 去掉边框线 */
    border: none;
    border-radius: 5px;
    color: white;
    background-color: orange;
}

/* 给按钮加上点击事件 */
#submit:active {
    background-color: grey;
}

/* 正文编辑区样式设置 */
#editor {
    /* 给正文编辑区家伙是哪个圆角矩形 */
    border-radius: 10px;
    /* 加上半透明效果 */
    /* 但是没显示具体的效果，其实是被加上的内容（编辑器）不透明导致的 */
    /* background-color: rgba(255,255,255,0.8); */
    
    /* 此时就需要使用CSS中设置半透明的另一个属性opacity：该属性的特点就是能够让里面的子元素也跟着一起透明！！ */
    /* 后面的值是个百分数，就相当于rgba中的小数 */
    /* 子元素跟着半透明 */
    opacity: 80%;
}